<template >
  <div class="container">
    <!-- 用户信息 -->
    商品详情
    {{data}}
  </div>
</template>
<script>
import { Tag, Col, Icon, Cell, CellGroup, Button, List, Toast } from 'vant'
import CommentList from '../../components/comment'
export default {
  components: {
    CommentList,
    [Tag.name]: Tag,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
    [List.name]: List,
    [Toast.name]: Toast
  },
  data () {
    return {
      time: 0,
      cacheDuration: 30000,
      data: {
        liked: false
      },
      stats: {
        likes: 0
      },
      //
      loaded: false,
      visible: false,
      formats: [
        'tsline-text',
        'tsline-thumb',
        'tsline-banner',
        'tsline-gralley'
      ]
    }
  },
  created () {
    console.log('test')
    console.log('______________created_________________')
    console.log(this.queryParams)
  },
  mounted () {
    console.log('______________mounted_________________')
    // this.onLoad()
  },
  computed: {
    queryParams () {
      return this.$route.query
    },
    relevantApi () {
      return {
        url: 'cms/relevant',
        params: {
          id: this.id
        }
      }
    }
  },
  methods: {
    onLoad () {
      this.axios
        .get('/share/goods/' + this.queryParams.id, {
          headers: { openAuth: true, FastMode: true }
        })
        .then(response => {
          this.data = response.data
          this.loaded = true
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    download () {
      this.$router.replace({
        name: 'download'
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.framerich {
  padding: 0 15px;
}
.user-avatar {
  width: 35px;
  height: 35px;
}
.subtitle {
  span {
    font-size: 10px;
    color: lightgray;
  }
}
.content-gallery {
  padding: 15px;
  img {
    width: 100%;
  }
}
.content-video {
  padding: 15px;
  img {
    width: 60%;
    border-radius: 5px;
  }
}
</style>
